<template>
 <div class="Root">
   <div class="hade"><img src="https://y.gtimg.cn/mediastyle/yqq/img/logo.png?nowebp=1" alt="">
     <p @click="click2('音乐馆')" :class="{ctive:state.color=='音乐馆'}">音乐馆</p>
     <p @click="click2('我的音乐')" :class="{ctive:state.color=='我的音乐'}">我的音乐</p>
     <p @click="click2('客户端')" :class="{ctive:state.color=='客户端'}">客户端</p>
     <p @click="click2('开放平台')" :class="{ctive:state.color=='开放平台'}">开放平台</p>
     <p @click="click2('vip')" :class="{ctive:state.color=='vip'}">vip</p>
   </div>
   <router-view/>
   <p>{{state.color}}</p>
 </div>
</template>

<script>
import {reactive} from "vue";
import router from "@/router";
export default {
  name: "Home",
  setup(){
const  state= reactive({
  color:"音乐馆"
})
 let click2= (v)=>{
  state.color=v;
  if (v=="音乐馆"){
    // this.$router.push()
    console.log(this)
    router.push("/home/index")
  }else if (v=="我的音乐"){
    router.push("/home/mymusic")
  }
  console.log(state.color)
    }
return {state,click2}
  },
  created() {
    // router.push("/index")
    console.log("哈哈")
this.axios.get("/api/recommend/playlist/u").then(data=>{
  console.log(data)
}).catch(err=>{
  console.log(err)
});
  }
}
</script>

<style scoped>
.Root{
  padding: 0 200px;
}
.hade{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px #888888 solid;


}
.hade img{
  height: 50px;
  position: relative;
  top: 20px;
}
.hade p{
  line-height: 100px;
  width:100px;
  text-align: center;
}
.ctive{
  background-color: #31c27c;
  color: #fff;
}

</style>